<template>
	<view class="box bg-f7">

		<view class="padding-30">
			<view v-for="item in couponList" class="bg-white z-0 item-box padding-l-r-30 margin-b-20 border-radio-14">
				<view class="item-info align-items-center">
					<view class="flex-1">
						<view class="item-name fs-30 color-0 margin-b-10">
							{{item.coupon.name}}
						</view>
						<view class="fs-24 color-333">
							有效期： {{item.end_time || '无'}}
						</view>
					</view>
					<view class="fs-26 color-0">
						<text class="fs-60 margin-r-10">{{item.coupon.price}}</text>元
					</view>
				</view>
				<view class="solid"></view>
				<view class="rule-box align-items-center">
					<text class="fs-24 color-80">使用规则</text>
					<image :class="{'rule-show' :item.isRuleShow}" @click="item.isRuleShow=!item.isRuleShow" src="/static/image/mine/right.png" mode="widthFix" ></image>
					<view class="flex-1"></view>
					<view class='user-btn' @click="useCoupon(item)">
						去使用
					</view>

				</view>
				<view class="fs-24 color-80 padding-t-b-30" v-show="item.isRuleShow">{{item.coupon.content}}</view>
				<view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import {couponList} from '@/api/coupon'
	export default {
		data() {
			return {

				couponList:[ ],
                isMore:false,
                page:1
			}
		},
        onLoad() {
			this.init()
		},
        //上拉加载函数
        onReachBottom() {
            if (this.isMore) {
                setTimeout(() => {
                    this.getList()
                }, 100)
            } else {
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh() {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function() {
                uni.stopPullDownRefresh()
            }, 1000)
        },
		methods: {
            init(){
                this.page =1
                this.couponList = []
                this.getList()
			},
            getList(){
                let params = {
                    page:this.page,
                    limit:10,
                    status: 0
                },arr =[]
                couponList(params).then(res=>{
                    arr=res.data
                    arr.map(item=>{
                        item.isRuleShow =false
                    })
                    this.couponList = this.couponList.concat(arr)
                    if (res.data && res.data.length > 9) {
                        this.isMore = true
                        this.page++
                    } else {
                        this.isMore = false
                    }
                })
            },
			useCoupon(item){
				uni.setStorageSync('couponInfo' ,JSON.stringify(item))
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box {  
		&::before ,&::after{
			content: '';
			position: absolute;
			top: 130rpx;
			left: 0;
			width: 20rpx;
			height: 20rpx;
			background-color: #f7f7f7;
			z-index: 1;
			border-radius: 50%;
			transform: translate(-50%,-50%);
		}
		&::after{
			left: auto;
			right: 0;
			transform: translate(50%,-50%);
		}
	}
	.item-info { 
		height: 130rpx;
	}
	.rule-box {
		height: 70rpx;
		image {
			width: 22rpx;
			margin-left: 12rpx;
		}
		.user-btn {
			width: 110rpx;
			height: 46rpx;
			background: #43ABC4;
			border-radius: 23rpx;
			text-align: center;
			color: #fff;
			line-height: 46rpx;
			font-size: 24rpx;
			&.user-other-btn {
					color: #808080;
					background-color: #F0F0F0;
			}
		}
		.rule-show {
			transform: rotate(-90deg);
		}
	}
</style>